<template>
  <div class="page-home-body">
    <HomeSwiper :list="swiperList" />
    <div class="home-main">
      <!-- 解决方案 -->
      <HomeSolution :solutionList="programmeList" />
      <!-- 关于我们 -->
      <HomeAbout :aboutAdress="videoAdress" :aboutH4="videoH4" />
      <!-- 联系我们 -->
      <HomeConnect />
    </div>
  </div>
</template>

<script>
import HomeSwiper from "./components/HomeSwiper.vue";
import HomeSolution from "./components/HomeSolution.vue";
import HomeAbout from "./components/HomeAbout.vue";
import HomeConnect from "./components/HomeConnect.vue";
import { HomeApi } from "@/api/api";
export default {
  name: "Home",
  components: { HomeSwiper, HomeSolution, HomeAbout, HomeConnect },
  data() {
    return {
      swiperList: [],
      programmeList: [],
      videoH4: "",
      videoAdress: "",
    };
  },
  mounted() {
    this.getBannerList();
    this.getSoltionsList();
    this.getAboutList();
  },
  methods: {
    getBannerList() {
      // console.log(HomeApi);
      HomeApi.homeBanner().then((res) => {
        this.swiperList = res.data.list;
      });
    },
    getSoltionsList() {
      HomeApi.homeSoltions().then((res) => {
        this.programmeList = res.data.list;
      });
    },
    getAboutList() {
      HomeApi.homeAbout().then((res) => {
        this.videoAdress = res.data.videoAdress;
        this.videoH4 = res.data.videoH4;
      });
    },
  },
};
</script>

<style scoped lang="less">
.page-home-body {
  width: 100%;
  min-width: 1204px;
  .home-main {
    // width: 1204px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>